<template>
	<view class="extend_container">
		<!-- 延長時間 -->
		<view class="duration" @click="showDurationPopup = true">
			<text>延長時間：</text>
			<view class="inp" :class="{declass:value==='請選擇延長時間'}">{{value}}</view>
		</view>
		<u-picker confirmText="確認" :columns="durationList" @confirm="confirmDuration" @cancel="showDurationPopup=false"
			@close="showDurationPopup=false" :closeOnClickOverlay="true" :show="showDurationPopup"></u-picker>

		<!-- 優惠卷 -->
		<view class="duration" @tap="openCouponPopup">
			<text>優惠券：</text>
			<view class="inp" :class="{declass:value1==='選擇優惠券'}">{{value1}}</view>
		</view>
		<u-popup :show="showCouponPopup" bgColor="#f8f8f8" :round="10" mode="bottom" :closeable="true"
			@close="showCouponPopup = false">
			<custom-coupon style="height: 500rpx; padding-top: 60rpx" :list="couponList" @slected="confirmCoupon">
			</custom-coupon>
		</u-popup>

		<view class="price_box">
			<view class="">支付金額：<text>${{totalPrice}}</text></view>
			<!-- <view v-if="storeInfo && userStoreInfo.user_level" class="">
				會員折扣：<text>{{setVipRate(storeInfo.vip_rate)}}</text></view> -->
		</view>

		<view class="pay_type">
			<view class="title">選擇付款方式</view>
			<radio-group @change="radioChange" class="radio_box">
				<label v-for="(item,index) in payType" :key="index">
					<text :class="{active:radioChecked==item.value}">{{item.value}}</text>
					<radio :value="item.value" :checked="currentCheck==index" color="#39B19D" />
				</label>
			</radio-group>
		</view>

		<view class="pay_btn">
			<u-button @click="confirmPay" :disabled="payflag" class="custom-style" text="確認"></u-button>
		</view>

	</view>
</template>

<script>
	import useStore from '@/store/index.js';
	import CustomCoupon from '@/pages/predetermineDetails/components/CustomCoupon.vue';
	import {
		getUserCoupon,
	} from '@/api/user';
	import {
		getRoomInfo,
		orderContinuation,
		extendTimeDetection
	} from '@/api/order.js'

	export default {
		components: {
			CustomCoupon
		},
		props: {
			orderDetails: {
				type: Object
			},
		},
		data() {
			return {
				value: '請選擇延長時間',
				durationList: [],
				showDurationPopup: false,
				extendDuration: '',
				value1: '選擇優惠券',
				showCouponPopup: false,
				couponList: [],
				couponInfo: {},
				totalPrice: 0,
				roomInfo: {},
				payType: [{
						value: "現金付款",
						checked: false
					},
					{
						value: "餘額付款",
						checked: false
					}
				],
				radioChecked: "現金付款",
				currentCheck: 0,
				payflag: false,
			}
		},
		mounted() {
			this.setExtendDuration()
			getRoomInfo({
				room_id: this.orderDetails.room_id
			}).then(res => {
				this.roomInfo = res
				this.totalPrice = res.price
			})
		},
		methods: {
			setExtendDuration() {
				let arr = []
				for (var i = 1; i <= 24; i++) {
					arr.push(`${i}小時`)
				}
				this.durationList = [
					[...arr]
				]
			},
			confirmDuration(e) {
				this.value = e.value[0]
				this.showDurationPopup = false
				this.setOrderExtendDuration()
				this.cleanCoupon()
				this.calculateAmount()
			},
			setOrderExtendDuration() {
				let num = this.value.split('小時')[0]
				if (num.indexOf('.') !== -1) {
					let h = num.split('.')[0]
					this.extendDuration = `${h}:30`
				} else {
					let h = num.split('.')[0]
					this.extendDuration = `${h}:00`
				}
			},
			openCouponPopup() {
				if (this.value == '請選擇延長時間') {
					uni.showToast({
						title: '請選擇延長時間',
						icon: 'none',
						duration: 2000
					})
					return
				}
				getUserCoupon({
					room_id: this.orderDetails.room_id
				}).then(res => {
					this.couponList = res
					if (res.length) {
						this.showCouponPopup = true
					} else {
						uni.showToast({
							title: '暫無可用優惠卷',
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			confirmCoupon(data) {
				let price = Number(this.totalPrice) + Number(this.couponInfo.money ? this.couponInfo.money : 0)
				if (Number(price) < Number(data.min)) {
					uni.showToast({
						title: '該優惠卷不滿足使用條件',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (this.couponInfo.id) {
					if (this.couponInfo.id == data.id) {
						this.cleanCoupon()
					} else {
						this.couponInfo = data
						this.value1 = data.title
						this.showCouponPopup = false
					}
				} else {
					this.couponInfo = data
					this.value1 = data.title
					this.showCouponPopup = false
				}
				this.calculateAmount()
			},
			cleanCoupon() {
				this.couponInfo = {}
				this.value1 = '選擇優惠券'
			},
			calculateAmount() {
				let duration = Number(this.value.split('小時')[0])
				let total = (Number(this.roomInfo.price) * duration).toFixed(2)
				if (this.couponInfo.id) {
					this.totalPrice = (total - Number(this.couponInfo.money)).toFixed(2)
				} else {
					this.totalPrice = total
				}
			},
			radioChange(e) {
				this.radioChecked = e.detail.value
			},
			confirmPay() {
				const pay_type = this.radioChecked == '餘額付款' ? 6 : 5
				const params = {
					order_id: this.orderDetails.id,
					order_continuation: this.extendDuration,
					pay_type,
					coupon_id: this.couponInfo.id ? this.couponInfo.id : '',
					money: this.totalPrice
				}
				if (pay_type == 6) {
					orderContinuation(params).then(res => {
						if (res.code == 0) {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: '續單成功',
								icon: 'success',
								duration: 2000
							})
							this.$emit('paymentBalance')
						}
					})
				} else {

					extendTimeDetection({
						order_id: this.orderDetails.id,
						order_continuation: this.extendDuration,
					}).then(res => {
						// console.log(res, '續單檢測')
						if (res.code == 0) {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						} else {
							const {
								order
							} = useStore()
							order.setOrderObjState({
								money: this.totalPrice
							})
							order.setExtendInfo(params)
							order.setExtendFlag(true)
							uni.navigateTo({
								url: `/pages/pay/slotMachines/slotMachines?orderNo=${this.orderDetails.order_no}`
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.extend_container {
		padding: 30rpx;
		height: 60vh;
		box-sizing: border-box;

		.duration {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			justify-content: space-between;

			input,
			.inp {
				width: 514rpx;
				height: 57rpx;
				background: #F3F5F9;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
				border: 1rpx solid #707070;
				text-align: center;
			}

			.inp {
				line-height: 57rpx;
				color: #000;
			}

			.declass {
				color: #ccc;
			}

		}

		.price_box {
			display: flex;
			justify-content: space-between;

			text {
				color: #FF6600;
				font-weight: bold;
			}
		}

		.pay_type {
			margin-top: 30rpx;

			.title {
				margin-bottom: 30rpx;
			}

			.radio_box {
				display: flex;
				flex-direction: column;
				padding: 0 67rpx 0 46rpx;
				box-sizing: border-box;
				position: relative;

				label {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 33rpx;

					.active {
						color: #39B19D;
					}
				}

				.balance {
					position: absolute;
					bottom: -10rpx;
					right: 67rpx;
					font-size: 24rpx;
				}

				.card_text {
					position: absolute;
					bottom: -60rpx;
					left: 46rpx;
					width: 100%;
					// padding: 0;
				}

				.ticket {
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}

				.ticket_text {
					padding: 10rpx 30rpx;
					background-color: #00BC64;
					color: #fff;
					border-radius: 10rpx;
					font-size: 26rpx;
					display: inline-block;
				}

				.ticket_text_inp {
					border: 1rpx solid #ccc;
					// flex: 1;
					padding: 10rpx 30rpx;
					width: 300rpx;
					border-radius: 16rpx;
					text-align: center;
					background: #F3F5F9;
					color: #ccc;
				}

				.active {
					border-color: #000;
					color: #000;
				}
			}
		}

		.pay_btn {
			margin-top: 30rpx;

			.custom-style {
				background-color: #39B19D;
				color: #fff;
				font-size: 40rpx;
			}
		}
	}
</style>